import React from 'react';
import { Checkbox, Button, Tools, Toast, Modal, Icon, Bubble, ColorPicker, InputItem } from 'weaver-mobile';
import { inject, observer } from 'mobx-react';
import {toJS} from 'mobx';
import { Base64 } from 'js-base64';
import { getMultiStrFromBase64, getCurrentLabel, changeEncodeCurrentLabel} from './followUtil';
import { Route, withRouter, Switch, Redirect } from 'react-router-dom';
const userLanguage = window.e9_locale.userLanguage;
const alert = Modal.alert;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
const getLabel = Tools.getLabel;
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;
@inject('followStore','attentionStore')
@withRouter
@observer
export default class TagEdit extends React.Component {
  state = {
    value: '重要',
    sValue: 0,
    Levelvisible: false,
    selected: '',
    clicked: 'none',
    colorSetShow:false,
    showname:""//用于显示base解码后的值
  };
  componentDidMount() {
    const {followStore} = this.props
    const {showcolor} = followStore
    if(showcolor==""){
      this.props.followStore.showcolor=this.getRandomColor()
    }
  }
  toHistory = (val) => {
    this.props.history.go(-1);
  }

  handleClick = () => {
  }

  namesame = () =>{
    const {followStore} = this.props
    const {showname,showcolor,followId} = followStore
    let currentLabel = getCurrentLabel(getMultiStrFromBase64(showname),userLanguage)
    const arr = followStore.followList.map((val)=>{
      if(getCurrentLabel(getMultiStrFromBase64(val.showname),userLanguage)==currentLabel){
        return false
      }else{
        return true
      }
    })
   return arr.indexOf(false) //验证数组中是否存在false，存在则返回索引值，不存在则返回-1
  }

  idsame = () =>{
    const {followStore} = this.props
    const {showname,showcolor,followId} = followStore
    const arr = followStore.followList.map((val)=>{
      if(val.id==followId){
        return false
      }else{
        return true
      }
    })
   return arr.indexOf(false) 
  }
  doSave =() =>{
    const {followStore,attentionStore} = this.props
    const {getAttentionTypeSet,followId,showname,showcolor,setState,saveAttentionTypeSet} = followStore//showname是base64的
    const { getTree,onSearch } = attentionStore
    getTree();
    let currentLabel = getCurrentLabel(getMultiStrFromBase64(showname),userLanguage)
    if(currentLabel==""){
      Bubble.warning(getLabel('511461','关注类型名称不能为空'), 2, {}, 1)
      return
      }else if(currentLabel!=""&&this.namesame() == -1||this.idsame()!=-1&&this.namesame()==this.idsame()){  //新建标签时重复标签名验证,且对已有标签不操作进行保存不会验证重复标签
        if(followId==""){
          saveAttentionTypeSet({
            src:'saveData2',
            showname: getMultiStrFromBase64(showname),
            colorval:showcolor
          })
        }else{
            followStore.followList.map((val)=>{
              if(val.id==followId){
                val.showname =   getMultiStrFromBase64(showname),
                val.colorval = showcolor;
              }else{
                val.showname = getMultiStrFromBase64(val.showname)
              }
            })
            saveAttentionTypeSet({src:'saveData',
              delIds:'',
              data : JSON.stringify(followStore.followList)})
      }
      getTree();
      onSearch();
      this.props.history.go(-1)
    }else{
      Bubble.warning(getLabel('511462','该关注类型已存在'), 2, {}, 1)
    }
  }


  getRandomColor=()=> {
    let rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16);
    if(rand.length == 6){
        return "#"+rand;
    }else{
        return this.getRandomColor();
    }
  }

  inputOnChange=(v)=>{
    const {followStore} = this.props
    const{setState, followId} = followStore
    let getCurrentLabel=v;
    let old_list_label=""
    let new_list_label=""
    // 中文转label
    followStore.followList.map((val)=>{
      if(val.id==followId){
        old_list_label = val.showname
      }
    })
    old_list_label = getMultiStrFromBase64(old_list_label)//~`~`7 中文`~`/ English`~`9 繁体`~`~
    new_list_label =  changeEncodeCurrentLabel(old_list_label,v,userLanguage)
    setState({showname:new_list_label})
  }

  render() {
    const {followStore} = this.props
    const {getAttentionTypeSet,followId,showname,showcolor,setState} = followStore
    return (
      <div className="follow">
        <div className="editContent_middle" style={{height: 'calc(100% - 80px)'}}>
          <InputItem
            clear
            placeholder={getLabel('511578','请输入关注类型名称')}
            value={getCurrentLabel(getMultiStrFromBase64(showname),userLanguage)}
            ref={el => this.autoFocusInst = el}
            onChange={this.inputOnChange}
            extra={<div><label style={{color:'red',fontSize: '20px',padding: '5px',display:showname==""?"":"none",position:"relative",top:"3px"}} >*</label><Icon type="editor" /></div>}
          >{getLabel('511463','关注类型名称')}</InputItem>
          <InputItem
            clear
            value={showcolor}
            ref={el => this.autoFocusInst = el}
            onChange = {(v)=>{setState({showcolor:v})}}
            extra={<Icon type="right" onClick={()=>{this.setState({colorSetShow:true})}} />}
          >{getLabel('511464','关注类型颜色')}</InputItem>
          {this.state.colorSetShow&&<ColorPicker color={showcolor} onChange={color =>{setState({showcolor:color.hex})} } />}
        </div>
        <div style={{height:"47px"}}></div>
        <div className="followContent_bottom">
          <Button  type="primary" onClick={()=>{this.doSave()}}>{getLabel('86','保存') }</Button>
        </div>
        
      </div>

    )
  }
}